<template>
  <div class="main-search">
    <div class="left-form" :style="{ height: thisHeight }">
      <Form ref="zzSearchForm" :model="searchModel" :label-width="100" inline>
        <Row>
          <template v-for="item in searchModel.column" :key="item">
            <Col v-if="!item.hidden" span="6">
              <FormItem :label="item.label">
                <component
                  :is="typeComponentMap[item.type]"
                  :model="searchModel.model[item.field]"
                  :config="item"
                  @update="update"
                ></component>
              </FormItem>
            </Col>
          </template>
        </Row>
      </Form>
    </div>
    <div class="right-btns">
      <Space>
        <Button
          v-if="hasMore"
          shape="circle"
          :icon="
            thisHeight === defaultHeight ? 'ios-arrow-down' : 'ios-arrow-up'
          "
          @click="setHeight"
        ></Button>
        <Button
          type="primary"
          @click="searchBtn()"
          :loading="loading"
          size="default"
          >查询</Button
        >
        <Button @click="resetBtn()" size="default">重置</Button>
        <Button shape="circle" icon="md-settings" size="default"></Button>
      </Space>
    </div>
  </div>
</template>

<script>
import { markRaw } from 'vue'
import sInputText from './components/inputText.vue'
import sSelectBase from './components/selectBase.vue'
import sTreeSelect from './components/treeSelect.vue'

export default {
  name: 'zzSearch',
  components: {},
  emits: ['getSearchData', 'resetFields'],
  props: {
    searchOptions: {
      type: Object,
      required: true,
    },
    hasMore: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchModel: this.searchOptions,
      defaultHeight: '34px',
      thisHeight: '34px',
      typeComponentMap: {
        inputText: markRaw(sInputText),
        selectBase: markRaw(sSelectBase),
        treeSelect: markRaw(sTreeSelect),
      },
    }
  },
  watch: {
    searchOptions: {
      async handler(newVal) {
        if (newVal) {
          this.searchModel = newVal
        }
      },
      deep: true,
    },
  },
  methods: {
    searchBtn() {
      this.$emit('getSearchData', this.searchModel.model)
    },
    // 设置高度
    setHeight() {
      this.thisHeight =
        this.thisHeight === this.defaultHeight ? 'auto' : this.defaultHeight
    },
    // 更新组件
    update(item, value) {
      this.searchModel.model[item.field] = value
    },
    // 重置
    resetBtn() {
      this.reset()
      this.$emit('resetFields')
    },
    // 执行重置
    reset() {
      for (const key in this.searchModel.model) {
        if (this.$XEUtils.isArray(this.searchModel.model[key])) {
          this.searchModel.model[key] = []
        } else if (this.$XEUtils.isNull(this.searchModel.model[key])) {
          this.searchModel.model[key] = null
        } else if (this.$XEUtils.isNumber(this.searchModel.model[key])) {
          this.searchModel.model[key] = null
        } else if (this.$XEUtils.isObject(this.searchModel.model[key])) {
          this.searchModel.model[key] = {}
        } else if (this.$XEUtils.isBoolean(this.searchModel.model[key])) {
          this.searchModel.model[key] = false
        } else {
          this.searchModel.model[key] = ''
        }
      }
    },
  },
}
</script>

<style scoped lang="less">
.main-search {
  display: flex; // 将其子元素设置为弹性盒子模型，使其子元素在水平方向上排列

  .left-form {
    flex: 1; // 弹性尺寸设置为1，使其在水平方向上自动拉伸，占据剩余空间
    overflow: hidden;
    align-self: center; // 交叉轴方向（纵向）居中对齐

    .ivu-form-item {
      width: 100%;
      margin-bottom: 6px !important;

      :deep(.ivu-form-item-label) {
        padding-right: 8px;
      }
    }
  }

  .right-btns {
    margin-top: 0px;
    margin-left: 10px;
  }
}

.ivu-col {
  min-width: 240px !important;
}
</style>
